<template>
  <div class="see_doctor_wrapper">
    <div class="reg_no_wrapper">
      <div class="reg_no_text">挂号单号</div>
      <div class="reg_no_input_wrapper"><el-input v-model="reg_no"  placeholder="请输入内容"></el-input></div>
      <div>
        <el-button @click="blur" icon="el-icon-search" style="margin-left: 10px;margin-top: 5px" circle></el-button>
      </div>
      
    </div>
    <div class="user_info_wrapper" :hidden="!showContent">
      <div class="user_info_card">
      <!-- 用户账号昵称，真实姓名， 账号ID， 手机号,头像 -->
        <div class="card_left" >
          <div class="user_avatar_wrapper gl_radius">
            <img class="gl_img gl_radius" :src="petOwn.avatar" alt="">            
          </div>
          <div class="vip_wrapper" style="border: 0px solid red">
            <span class="icon iconfont icon-vip" style="font-size: 30px"></span>
          </div>
        </div>
        <div class="card_right" >
          <el-form label-width="80px">
            <!-- <el-form-item  :label="item" v-for="(item, index) in ['真实姓名','昵称','账号ID','手机号']" :key="index">
              <el-input  :disabled='true' v-model="value"></el-input>
            </el-form-item> -->
            <el-form-item  label="真实姓名" >
              <el-input  :disabled='true' v-model="petOwn.realname"></el-input>
            </el-form-item>
            <el-form-item  label="昵称" >
              <el-input  :disabled='true' v-model="petOwn.nickname"></el-input>
            </el-form-item>
            <el-form-item  label="账号ID" >
              <el-input  :disabled='true' v-model="petOwn.email"></el-input>
            </el-form-item>
            <el-form-item  label="手机号" >
              <el-input  :disabled='true' v-model="petOwn.phoneNum"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div> <!-- 用户资料卡片结束 -->
    </div>

     <!-- 宠物资料 -->
    <div class="pet_info_wrapper" :hidden="!showContent">
      <div class="pet_info_card">
        <div class="pet_card_left">
          <el-carousel trigger="click" height="200px">
            <el-carousel-item v-for="item in 4" :key="item">
              <img class="gl_img" :src="pet.avatar==null?'':pet.avatar" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 宠物图片，宠物ID， 宠物昵称， 宠物种类，年龄，  性别 -->
        <div class="pet_card_right">
          <el-form label-width="80px">
            <!-- <el-form-item  :label="item" v-for="(item, index) in ['宠物ID','宠物昵称','宠物种类','年龄','性别']" :key="index">
              <el-input  :disabled='true' v-model="value"></el-input>
            </el-form-item> -->
            <el-form-item  label="宠物ID">
              <el-input  :disabled='true' v-model="pet.id"></el-input>
            </el-form-item>
            <el-form-item  label="宠物昵称">
              <el-input  :disabled='true' v-model="pet.nickname"></el-input>
            </el-form-item>
            <el-form-item  label="宠物种类">
              <el-input  :disabled='true' v-model="pet.catogory"></el-input>
            </el-form-item>
            <el-form-item  label="年龄">
              <el-input  :disabled='true' v-model="pet.age"></el-input>
            </el-form-item>
            <el-form-item  label="性别">
              <el-input  :disabled='true' v-model="gender"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
     <!-- 宠物资料结束 -->

     <!-- 上传报告开始 -->
    <div class="report_wrapper" :hidden="!showContent">
      <div class="report_inner">
        <el-upload
          class="upload-demo"
          :disabled="!isCheck(pos)"
          :headers="headers"
          :action="'/his/upload/report/'+this.reg.id"
          :on-change="afteruploadReport"
          :on-remove="handleRemoveReport"
          :on-preview="clickFile"
          :file-list="reg.reportList">
          <el-button size="small" type="primary" :disabled="!isCheck(pos)">上传报告附件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb(<span style="color: red">只有检验处的人才能上传报告</span>)</div>
        </el-upload>
        <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :with-header="false">
          <div class="report_img_wrapper">
            <img :src="cur_report_img" class="report_img" alt="">
          </div>
        </el-drawer>
      </div>
    </div>

    <!-- 诊断信息开始 -->
    <div class="doc_info_wrapper" :hidden="!showContent">
      <!-- 服务类型， 是否就诊， 诊断建议， 药物列表，  -->
      <div class="doc_infor_card">
        <el-form>
          <el-form-item label="服务名称">
            <el-input v-model="reg.section.sectionname"></el-input>
          </el-form-item>
          <el-form-item label="是否已就诊">
            <el-switch v-model="isTreat" disabled></el-switch>
          </el-form-item>
          <el-form-item label="就诊建议">
            <el-input type="textarea" v-model="reg.treatSug" :rows="5"></el-input>
          </el-form-item>
        </el-form>
          <!-- <el-form-item>
            <el-button type="primary" @click="onSubmit">提交就诊情况</el-button>
            <el-button>取消</el-button>
          </el-form-item> -->

        <el-form ref="drug" label-width="110px" class="demo-dynamic">
          <el-form-item v-for="(drug, index) in drugs"
            :label="'药物'"
            :key="index"
            :prop="'drug.' + index + '.id'"
            :rules="{
            }"
          >
            <div class="drug_item_wrapper">
              <el-select v-model="drug.id" style="width: 200px;" placeholder="请选择" filterable>
                <el-option 
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.drugname"
                  :value="item.id">
                </el-option>
              </el-select>
              <div style = "width: 10px;"></div>
              <el-input class="drug_num_input" v-model="drug.count" placeholder="请输入数量" blur="数量必须大于0"></el-input>
              <div style = "width: 200px;margin-left: 10px;">
                <el-select v-model="drug.v" style="width: 200px;" placeholder="单次药量" filterable>
                  <el-option 
                    v-for="(item, index) in drug_volums"
                    :key="index"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </div>
              <div style = "width: 200px;margin-left: 10px;">
                <el-select v-model="drug.c" style="width: 200px;" placeholder="次数" filterable>
                  <el-option 
                    v-for="(item, index) in drug_counts"
                    :key="index"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </div>
              <div style = "width: 50px;"></div>
              <el-button @click.prevent="removeDomain(drug)">删除</el-button>
            </div>
          </el-form-item>
          <el-form-item >
            <!-- <el-button type="primary" @click="submitForm('drug')">提交</el-button> -->
            <el-button :disabled="isCheck(pos)" @click="addDomain">新增药物</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitTreat">提交就诊情况</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>

           
      </div> 
    </div><!-- 诊断信息结束 -->

  </div> 
</template>

<script>
import VIPShow from '../components/VIPShow'
import {myGet, myPostBody, myPut, myDeleteBody, myDelete} from '../utils/api'

export default {
  data(){
    return {
      drug_volums: ['一次一粒', '一次两粒', '一次一瓶',  '一次200ml'], 
      drug_counts: ['三天两次', '一天三次', '一天一次', '早晚各一次'], 
      drug_v:'', 
      drug_c:'',  
      showContent: false, 
      headers: {
        token: window.localStorage.getItem("token")
      },
      cur_report_img: '',
      drawer:false,
      fileList: [{}],
      gender: '',
      reg_no: '',
      value: '', 
      isTreat: false,
      pet: {avatar: '', id: '', nickname: '', catogory: '', age: 2},
      petOwn: {avatar: '', id: '', realname: '', nickname: '', email: '', phoneNum: ''},
      reg: {section: {sectionname: ''}, sectionId: '', reportList: []},
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }, 
      drugs: [],  
      options: [],
      pos: window.localStorage.getItem("position")
    }//return end
  }, //data end
  mounted(){
    myGet('/drug/all', null).then(res => {
      var myres = res.data.res
      this.options = myres
      console.debug(myres)
    }).catch(err => {
      console.debug(err)
    })
  },
  watch: {
    'isTreat'(newv, oldv){
      this.reg.isTreat = newv?1:0
      console.debug(this.reg)
    },
    'reg.isTreat'(newv, oldv){
      this.isTreat = newv == 1?true: false
    },
    'pet.gender'(newv, oldv){
      if(newv == '1'){
        this.gender = '雄性'
      }else if(newv == '0'){
        this.gender = '雌性'
      }
      console.debug(newv)
      console.debug(oldv)
    },
  },
  methods:{
    isCheck(pos){
      if(pos == '检验处'){
        return true
      }
    },
    afteruploadReport(file, fileList){
      setTimeout(()=>{
        this.blur()
      }, 1000)
      
    },
    handleRemoveReport(file, fileList) {
      console.log(file, fileList);
      myDelete('/upload/remove/'+file.id, null).then(res => {
        console.debug(res)
        this.$message({showClose: true, message: '删除成功', type: 'success'})
        this.blur()
      }).catch(err => {
        console.debug(err)
        this.$message({showClose: true, message: '删除失败', type: 'error'})
      })
    },
    clickFile(file){
      console.debug(file)
      this.drawer = true
      this.cur_report_img = file.url
    },
    submitTreat(){
      //校验reg，pet，drugs
      var isNum = true;
      this.drugs.forEach(e => {
        if(isNaN(e.count) || e.count == undefined || e.count == null || e.count == ''){
          isNum = false;
        }
      });
      if(!isNum){
        this.$message({showClose: true, message: "参数校验失败-药物数必须是数字", type: 'error'})
        return;
      }
      if(this.reg.id == null || this.pet.id == null){
        this.$message({showClose: true, message: "参数校验失败", type: 'error'})
        return;
      }
      var param = {treatSug: this.reg.treatSug, regId: this.reg.id, drug_list: this.drugs}
      console.debug(param)
      myPostBody('/reg/submit_treat',param).then(res => {
        this.$message({showClose: true, message: '更新成功', type: 'success'})
        console.debug(res)
        this.blur()
      }).catch(err => {
        console.debug(err)
      })
    },
    blur(){
      console.debug(this.reg_no)
      myGet('/reg/seedoctor/'+this.reg_no, null).then(res => {
        var myres = res.data.res
        console.debug('blur myres')
        console.debug(myres)
        this.reg = myres.reg
        this.pet = myres.pet
        this.petOwn = myres.petOwn
        this.drugs = myres.reg.drugList
        this.showContent = true;
      }).catch(err => {
        console.debug(err)
      })
    },
    removeDomain(item) {
      var index = this.drugs.indexOf(item)
      console.debug('removeDomain')
      console.debug(item)
      if (index !== -1) {
        this.drugs.splice(index, 1)
      }
      myDeleteBody('/reg/drug', [item.relateId]).then(res => {
        console.debug(res)
        this.$message({showClose: true, message: '删除成功', type: 'success'})
      }).catch(err=>{
        console.debug(err)
        this.$message({showClose: true, message: '删除失败', type: 'error'})
      })

    },
    addDomain() {
      this.drugs.push({
        value: '',
        isNew: 1,
        key: Date.now()
      });
    }
  },
  components: {
    VIPShow
  }
}
</script>


<style scoped>
@import '../static/iconfont.css';
.drug_num_input{
  width: 200px;
}

.report_img_wrapper{
  box-shadow: greenyellow 0 0 5px;
  padding: 2%;
  /* width: 100%; */
}
.report_img{
  box-shadow: blue 0 0 5px;
  max-width: 95%;

}
.reg_no_wrapper{
  /* box-shadow: aquamarine 0 0 3px; */
  height: 50px;
  display: flex;
  margin-top: 20px;
}
.reg_no_text{
  margin: auto 20px;

}
.reg_no_input_wrapper{
  margin: auto 5px;
}


.see_doctor_wrapper{
  padding: 0.5px;
}
.user_avatar_wrapper{
  width: 80px;height: 80px;
  box-shadow: brown 0 0 5px;
  margin: 10px;
}


.user_info_wrapper{
  border: 0px solid red;
  width: 100%;
  /* margin: px; */
}
.user_info_card{
  padding-top: 0.5px;
  /* width: 90%; */
  display: flex;
  margin: 1%;
  box-shadow: rgb(161, 158, 158) 0 0 5px;
}
.card_left{
  width: 100px;
}

.card_right{
  margin: 10px;
  flex: 0.7;
}


.pet_info_wrapper{
  border: 0px solid red;
  width: 100%;
  height: 30%;
}

.pet_info_card{
  box-shadow: rgb(124, 117, 117) 0 0 10px;
  display: flex;
  padding: 20px;
  margin: 1%;
}
.pet_card_left{
  width: 200px;height: 200px;
  box-shadow: rgb(124, 117, 117) 0 0 10px;
  margin: 0px;
}

.doc_info_wrapper{
  border: 0px solid red;
  width: 100%;
  height: 30%;
}

.doc_infor_card{
  width: 96%;
  margin: 1%;
  box-shadow: rgb(141, 133, 133) 0 0 10px;
  padding: 1%;
}

.drug_item_wrapper{
  width: 100%;
  border: 0px solid red;
  display: flex;
}

.report_wrapper{
  /* box-shadow: aquamarine 0 0 5px; */
  width: 100%;
}
.report_inner{
  margin: 1%;
  box-shadow: bisque 0 0 5px;
  width: 98%;
  min-height: 50px;
  /* border: 1px solid red; */
}
</style>


<style>
/* 将轮播图宠物头像的切换点隐藏 */
.see_doctor_wrapper .el-carousel__indicators,.el-carousel__indicators--horizontal {
  display: none;
}

.see_doctor_wrapper .doc_infor_card .el-form-item__content{
  text-align: left;
}

.see_doctor_wrapper .el-select{
  width: 500px;
}
</style>
